<template>
	<el-row class="Row">
		<el-input placeholder="请输入商品名称" v-model="ordersNum"></el-input>
		<el-input placeholder="请输入最低价格" v-model="minPrice"></el-input>
		<el-input placeholder="请输入最高价格" v-model="maxPrice"></el-input>
		<el-button class="searchBtn" type='info' :icon="Search" @click="search">搜索</el-button>
	</el-row>
	<el-table :data="newRes" style="width: 100%;">
		<el-table-column label="订单号" prop="ordersId" align="center"></el-table-column>
		<el-table-column label="商品名称" prop="wareName" align="center"></el-table-column>
		<el-table-column label="商品原价" prop="price" align="center"></el-table-column>
		<el-table-column label="会员价" prop="vipPrice" align="center"></el-table-column>
		<el-table-column label="实际价格" prop="actPrice" align="center"></el-table-column>
		<el-table-column label="用户名" prop="userName" align="center"></el-table-column>
		<el-table-column label="门店名" prop="outletName	" align="center"></el-table-column>
		<el-table-column label="联系方式" prop="userPhone" align="center"></el-table-column>
		<el-table-column label="订单状态" align="center">

				<template #header>
					<el-dropdown>
						 <span class="el-dropdown-link" style="font-weight: 80;">
						     订单状态
						      <el-icon class="el-icon--right"><ArrowDown /></el-icon>
						</span>
						   <!-- <span></span> -->
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item @click="orderFiltter7">全部</el-dropdown-item>
								<el-dropdown-item @click="orderFiltter1">待退款</el-dropdown-item>
								<el-dropdown-item @click="orderFiltter2">待付款</el-dropdown-item>
								<el-dropdown-item @click="orderFiltter3">待收货</el-dropdown-item>
								<el-dropdown-item @click="orderFiltter4">已发货</el-dropdown-item>
								<el-dropdown-item @click="orderFiltter5">已付款</el-dropdown-item>
								<el-dropdown-item @click="orderFiltter6">订单过期</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</template>
			<template #default="scope">
				<div style="color: forestgreen;">
					{{scope.row.orderStatus== 0 ? '待退款' : scope.row.orderStatus== 1 ? '待付款' : scope.row.orderStatus== 2 ? '待收货' :  scope.row.orderStatus== 3 ? '已发货' : scope.row.orderStatus== 4 ? "已付款 " : '订单过期'}}
				</div>
			</template>
		</el-table-column>
		<el-table-column label="更多" style="width: 50vh;" align="center" >
			<template #default="scope">
				<div style="display: flex;">     <!-- 3：已发货 4：已付款 -->
					<el-button size="small" :class="[scope.row.orderStatus=='3'? 'Btn1ColorBlue' : 'Btn1ColorBrown']">发货</el-button>
					<el-button size="small" :class="[scope.row.orderStatus=='4'? 'Btn2ColorRed' : 'Btn2ColorBrown']">退货</el-button>
				</div>
			</template>
			
		</el-table-column>
	</el-table>
	<el-pagination
		layout="prev,pager,next"
		:page-size="pageSize"
		:page-count="pageCount"
		v-model:current-page="pageIndex"	
		@current-change="changePage"
	></el-pagination>
</template>

<script setup lang="ts">
	import {Search,ArrowDown} from '@element-plus/icons-vue'
	import {getOrderList,searchOrderList} from "../api/lqy/index"
	import { ref } from 'vue'
	
	let pageIndex=ref(1)
	let pageSize=ref(5)
	let newRes=ref([])
	let pageCount=ref()
	let ordersNum=ref()
	let minPrice=ref()
	let maxPrice=ref()
	
	//搜索
	const search = async()=>{
		let res = await searchOrderList({
			ordersNum:ordersNum.value, //订单号
			minPrice:minPrice.value, //最低价格
			maxPrice:maxPrice.value, //最高价格
			pageIndex:pageIndex.value, 
			pageSize:pageSize.value
		})
		console.log(res.value)
	}
	//获取订单信息
	const getOrders =async()=>{
		let res =await getOrderList({
			pageIndex:pageIndex.value,
			pageSize:pageSize.value
		})
		console.log(res)
		newRes.value=res.ordersList
		console.log(newRes.value)
		pageCount.value=res.pageCount
	}
	getOrders()
	const changePage = (page) => {
		pageIndex.value = page;
		getOrders()	
	}
	//全部
	const orderFiltter7 = async () => {
		await getOrders()
	}
	//待退款
	const orderFiltter1 = async () => {
		await getOrders()
		let arr = []
		newRes.value.forEach(v => {
			if (v.orderStatus == 0) {
				arr.push(v)
			}
	
			console.log(arr)
		})
		newRes.value = arr
	}
	//待付款
	const orderFiltter2 = async () => {
		await getOrders()
		console.log("代付款")
		let arr = []
		newRes.value.forEach(v => {
			console.log(v.orderStatus)
			if (v.orderStatus == 1) {
				arr.push(v)
			}
	
			console.log(arr)
		})
		newRes.value = arr
	}
	//待收货
	const orderFiltter3 = async () => {
		await getOrders()
		let arr = []
		newRes.value.forEach(v => {
			if (v.orderStatus == 2) {
				arr.push(v)
			}
	
			console.log(arr)
		})
		newRes.value = arr
	}
	//已发货
	const orderFiltter4 = async () => {
		await getOrders()
		let arr = []
		newRes.value.forEach(v => {
			if (v.orderStatus == 3) {
				arr.push(v)
			}
	
			console.log(arr)
		})
		newRes.value = arr
	}
	//已付款
	const orderFiltter5 = async () => {
		await getOrders()
		let arr = []
		newRes.value.forEach(v => {
			if (v.orderStatus == 4) {
				arr.push(v)
			}
	
			console.log(arr)
		})
		newRes.value = arr
	}
	//订单过期
	const orderFiltter6 = async () => {
		await getOrders()
		let arr = []
		newRes.value.forEach(v => {
			if (v.orderStatus == 5) {
				arr.push(v)
			}
	
			console.log(arr)
		})
		newRes.value = arr
	}
	
</script>

<style scoped>
	.Row .el-input{
		width: 15%;
		margin-right: 20px;
	}
	.searchBtn{
		background-color: #106ab1;
		border: none;
	}
	.el-pagination{
	        --el-pagination-bg-color:none;
	        --el-pagination-button-disabled-bg-color:none;
	        justify-content: center;
	}
	.el-dropdown-link {
	  cursor: pointer;
	  display: flex;
	  align-items: center;
	}
	.Btn1ColorBlue {
		background-color: blue;
		color: white;
	}
	.Btn1ColorBrown{
		background-color: #ccc;
		color: white;
	}
	.Btn2ColorRed {
		background-color: red;
		color: white;
	}
	.Btn2ColorBrown{
		background-color: #ccc;
		color: white;
	}
</style>